<template>
    <section>
        <el-card class="box-card" style="max-width:1000px; padding:20px 50px; margin:30px auto;">
            <div   class="clearfix" >
                <span style="font-size:20px;font-weight: bold">{{reportsData.check_unit}}检查报告</span>
                <el-button type="primary" @click="edit" v-if="showEdit">编辑报告</el-button>
                <el-button type="primary" style="float: right; padding: 3px 0; margin-left:8px;" plain @click="cancel"> 返 回 </el-button>
               <!-- <el-button
                        type="info"
                        style="float:right"
                        v-if="reportsData.check_report_status == '0'"
                        disabled
                >报告未提交</el-button>
                <el-button
                        type="info"
                        style="float:right"
                        v-if="reportsData.check_report_status == '2'"
                        disabled
                >报告已打回</el-button>
                <el-button
                        type="info"
                        style="float:right"
                        v-if="reportsData.check_report_status == '3'"
                        disabled
                >报告已审核</el-button>-->
                <el-button
                        :type="reportsData.check_report_status == '1' ? 'primary' : 'info'"
                        :disabled="reportsData.check_report_status != '1'"
                        style="float: right; padding: 3px 0"
                        @click="reviewReportDialog = true"
                > 审核报告 </el-button>

                <el-button
                        type="primary"
                        style="float: right; padding: 3px 0"
                        :disabled="dowFileStatus"
                        :loading="dowFileStatus"
                        @click="dowCheckReportFile"
                >下载整改通知书</el-button>
                <span v-if="reportsData.check_report_status == 3" style="display: block; text-align: right; color: #999; font-size: 14px;">请前往'整改通知书列表'下发通知书</span>
              <!--  <el-button
                        :type="reportsData.check_report_notice_status == 0 && reportsData.check_report_status == '3' ? 'primary' : 'info'"
                        :disabled="reportsData.check_report_notice_status == 1 || reportsData.check_report_status != '3'"
                        style="float: right; padding: 3px 0"
                        @click="submitReportDialog = true"
                > {{ reportsData.check_report_notice_status == 1 ? '通知书已下发' : '下发通知书' }}  </el-button>-->
          <!--     <el-row style="margin-top:30px">
                   <el-col :span="8">
                       <div class="grid-content">
                           <el-button type="primary" @click="createNotice">生成通知书</el-button>
                       </div>
                   </el-col>
                   <el-col :span="8">
                       <div class="grid-content">
                           <el-upload
                                   class="upload-demo"
                                   style="margin-left:0"
                                   action=""
                                   :limit="1"
                                   :on-exceed="handleExceed"
                                   :on-success="handleAvatarSuccess"
                                   :http-request="httpRequest"
                                   :show-file-list="false"
                                   :file-list="fileLists">
                               <el-button type="primary">上传扫描件</el-button>
                               &lt;!&ndash;<div slot="tip" class="el-upload__tip">只能上传本地PDF文件，且不超过2M</div>&ndash;&gt;
                           </el-upload>
                       </div>
                   </el-col>
               </el-row>-->
<!--

                <el-row>
                    <el-col :span="8">
                        <div class="grid-content">
                            <span v-if="reportsData.notice_book_name"><a :href="reportsData.notice_book_address">{{reportsData.notice_book_name}}</a></span>
                        </div>
                        <div class="grid-content">
                            <span v-if="reportsData.noticeBookNameWithoutPicture"><a :href="reportsData.noticeBookAddressWithoutPicture">{{reportsData.noticeBookNameWithoutPicture}}</a></span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content">
                            <span><a :href="scan_file.url">{{scan_file.name}}</a></span>
                        </div>
                    </el-col>
                </el-row>
-->

            </div>
            <div class="text item">
                <el-row :gutter="20">
                    <el-col :span="3"><div class="grid-content label-info">高校名称</div></el-col>
                    <el-col :span="4"><div class="grid-content label-title">{{reportsData.check_unit}}</div></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="3"><div class="grid-content label-info">检查组组长</div></el-col>
                    <el-col :span="4"><div class="grid-content label-title">{{reportsData.group_user_name}}</div></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="3"><div class="grid-content label-info">专家</div></el-col>
                    <el-col :span="20"><div class="grid-content label-title">
                        <span v-for="item in reportsData.check_user" :key='item' style="margin-right:10px;">{{item.full_name+'   '}}</span>
                    </div></el-col>
                </el-row>
                <el-row :gutter="20" v-if="reportsData.check_report_status != '0' && reportsData.check_report_status != '2' ">
                    <el-col :span="3"><div class="grid-content label-info" @dblclick="showEdit=true">检查项数量</div></el-col>
                    <el-col :span="8"><div class="grid-content label-title"><span>{{total || ''}}</span></div></el-col>
                </el-row>
            </div>
            <div v-if="reportsData.check_report_status != '0' && reportsData.check_report_status != '2' ">
                <hr style="height:1px;border:none;border-top:1px solid #f8f8f8; margin-top:20px;" />
                <div style="position:relative;margin-top:20px" v-if="reportsData.suggestion">
                    <div style="padding-bottom: 10px;font-weight: bold">综合意见</div>
                    <el-input
                            :autosize="true"
                            type="textarea"
                            resize="none"
                            class="showTextConter"
                            v-model="reportsData.suggestion"
                            readonly>
                    </el-input>
                </div>
                <div style="position:relative;margin-top:30px" v-if="reportsData.check_item_desc">
                    <span style="font-weight: bold">检查项</span>
                    <div v-for="item in reportsData.check_item_desc" :key="item.key" class="inspect-item">
                        <div class="inspect-title">
                            <span>{{item.check_item_three_order_number +'  '}}{{item.check_item_three}}</span>
                        </div>
                        <div class="inspect-info" v-if="item.image_list!=null" >
                            <div class="info-title">图片</div>
                            <div class="info-img">
                                <img  v-for="img in item.image_list" :key="img.path" @click="showImg(img.path)" :src="img.path" v-show="img.path!==null"/>
                            </div>
                        </div>


                        <div class="inspect-info" v-if="item.building_room !=null" >
                            <div class="info-title">楼宇 - 房间号</div>
                            <el-tag  v-for="(lab, index) in item.building_room" :key="index" type="success" style="margin-right:15px;">{{lab.building}}</el-tag>
                        </div>

                        <div class="inspect-info" v-if="item.desc !=null" >
                            <div class="info-title">描述信息</div>
                            <el-input
                                    :autosize="true"
                                    type="textarea"
                                    resize="none"
                                    class="showTextConter"
                                    v-model="item.desc"
                                    readonly>
                            </el-input>
                        </div>
                    </div>
                </div>
            </div>

        </el-card>
        <!--对话框-显示大图-->
        <el-dialog title="显示大图" :visible.sync="big_img_dialog.show">
            <img class="big-img" :src="big_img_dialog.path">
        </el-dialog>
        <!-- 审核通知书 -->
        <el-dialog
                title="审核检查报告"
                v-loading="reviewReportDialogLoading"
                :visible.sync="reviewReportDialog"
                width="30%"
                center>
            <!--<el-input type="textarea" :rows="4" v-model="reportDesc" placeholder="请输入审核意见，200字以内"></el-input>-->
            <span slot="footer" class="dialog-footer" style="">
                <el-button type="danger" @click="returnReport" v-if="reportsData.check_report_status==1">打回报告</el-button>
                <el-button type="info" v-if="reportsData.check_report_status==2" disabled>报告已打回</el-button>
                <el-button type="primary" style="margin:0 15px;"  @click="createNotice" :disabled="reportsData.check_report_status != 1"> 审核通过 </el-button>
                <el-button @click="reviewReportDialog = false"> 取 消 </el-button>
              </span>
        </el-dialog>
        <!-- 下发通知书 -->
        <el-dialog
                title="下发通知书"
                class="submit-report-dialog"
                v-loading="submitReportDialogLoading"
                :visible.sync="submitReportDialog"
                width="30%"
                :before-close="handleClose">
            <el-upload
                    class="upload-demo release-upload"
                    drag
                    action=""
                    :limit="1"
                    ref="reportFileUpload"
                    :on-exceed="handleExceed"
                    :on-success="handleAvatarSuccess"
                    :http-request="httpRequest"
                    :show-file-list="true"
                    :file-list="fileLists"
                    :auto-upload="false"
                    multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传PDF,Word文件，大小不超过10MB</div>
            </el-upload>
            <el-input type="textarea" :rows="4" v-model="issueReportDesc" placeholder="请输入整改总结，200字以内"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="submitReportDialog = false"> 取 消 </el-button>
                <el-button type="primary" @click="submitReportReady"> 下 发 </el-button>
              </span>
        </el-dialog>
    </section>
</template>

<script>
    import {getReportsDetail,returnReport,saveScanId,passNotice,issueReportNotice,createNoticeFile} from '../../api/report_manager_api'
    import {upload_file,get_update_img,get_file,getResourceUrl} from "../../api/common";
    import { saveAs } from '../../common/js/commons';
    export default {
        data() {
            return {
                //表格数据
                tableData: [],
                fileLists:[],
                reportDesc:'',
                issueReportDesc:'',
                submitReportDialog: false,
                dowFileStatus: false,
                reviewReportDialog: false,
                reviewReportDialogLoading: false,
                submitReportDialogLoading: false,
                reportsData:{
                    id:'',
                    check_report_status:''
                },
                scan_file:{
                    id:'',
                    name:'',
                    url:''
                },
                resource_url:'',
                big_img_dialog: {
                    show: false,
                    path: ''
                },
				
				showEdit: false,
            }
        },
        computed:{
            total:function(){
              return  Number(this.reportsData.check_item_uncount) +  Number(this.reportsData.check_item_con_count) +  Number(this.reportsData.check_item_very_count);
            }
        },
        methods: {
            //初始化页面
            initData() {
                if (this.resource_url.length == 0) {
                    getResourceUrl().then((res) => {
                        if (res.data.status == 200) {
                            this.resource_url = res.data.datas;
                        } else {
                        }
                    });
                }
                this.getDetail();
            },
            handleClose() {
                this.reportDesc = '';
                this.submitReportDialog = false;
            },
            issueReport() {
                let params = {
                    id: this.$route.params.id,
                    msg:{
                        content:this.issueReportDesc
                    }
                };
                issueReportNotice(params).then((res)=>{
                    if(res.data.status == 200) {
                        this.submitReportDialog = false;
                        this.reviewReportDialogLoading = false;
                        this.issueReportDesc = ''
                        this.$message({
                            type: 'success',
                            message: "通知书下发成功！"
                        });
                        this.initData();
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                    }
                });
            },
            submitReportReady() {
                this.$refs.reportFileUpload.submit();
            },
            showImg(path) {
               // this.big_img_dialog.path = this.fixUrl(path);
                this.big_img_dialog.path = path;
                this.big_img_dialog.show = true;
            },
            formatStar(cnt) {
                switch (cnt) {
                    case '1':
                        return '★';
                    case '2':
                        return '★★';
                    case '3':
                        return '★★★';
                    case '0':
                    default:
                        return '';
                }
            },
            getDetail(){
                let params = {
                    id: this.$route.params.id
                };
                getReportsDetail(params).then((res) => {
                    if (res.data.status == 200) {
                        let temp_data = JSON.parse(res.data.datas);
                        // 按check_item_three_item_order排序  [modified by xwang - 2018-10-25]
                        if(temp_data && temp_data.check_item_desc && temp_data.check_item_desc.length > 0){
                            temp_data.check_item_desc = temp_data.check_item_desc.sort(function (a, b) {
                                return a.check_item_three_item_order - b.check_item_three_item_order;
                            });
                        }
                        this.reportsData = temp_data;
                        let obj ={};
                        if(this.reportsData.file_name){
                            this.scan_file.name = this.reportsData.file_name;
                        }
                       if(this.reportsData.scanning_copy_id){
                           get_update_img({id:this.reportsData.scanning_copy_id}).then((res)=>{
                                if(res.data.status==200){
                                    this.scan_file.url = res.data.datas;
                                }
                            })
                        }

                        if(this.reportsData.notice_book_address){
                           getResourceUrl(this.reportsData.notice_book_address).then((res)=>{
                               this.reportsData.notice_book_address = res.data.datas + this.reportsData.notice_book_address;
                           });
                        }
                        if(this.reportsData.noticeBookAddressWithoutPicture){
                           getResourceUrl(this.reportsData.noticeBookAddressWithoutPicture).then((res)=>{
                               this.reportsData.noticeBookAddressWithoutPicture = res.data.datas + this.reportsData.noticeBookAddressWithoutPicture;
                           });
                        }
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                    }
                });
            },
            fixUrl(path){
                if(path && path.length > 0) {
                    return this.resource_url + path;
                }else{
                    return '';
                }
            },
            // 上传前对文件的大小的判断
            beforeAvatarUpload (file) {
               // const extension = file.name.split('.')[1] === 'pdf'
                const isLt2M = file.size / 1024 / 1024 < 2
               // if (!extension) {
                //    this.$message.error('上传模板只能是本地 pdf 格式!');
               // }
                if (!isLt2M) {
                    this.$message.error('上传模板大小不能超过 2MB!');
                }
                //return extension && isLt2M;
                return isLt2M;
            },
            handleExceed(files, fileList) {
                this.$message.warning(`限制只能上传1个文件`);
            },
            handleAvatarSuccess(res, file) {
                this.fileLists = [{'name': file.name, 'url': URL.createObjectURL(file.raw)}];
            },
            httpRequest(item,fileLists) {
                let formData = new FormData();
                formData.append('file', item.file);
                this.reviewReportDialogLoading = true;
                upload_file(formData).then((res) => {
                    let result = JSON.parse(res.data.datas);
                    if (res.data.status == 200) {
                       let params ={
                           id:this.reportsData.id,
                           scanning_copy_id:result.id,
                           file_name:item.file.name
                       }
                        saveScanId(params).then((res)=>{
                            this.issueReport()
                            if(res.data.status==200){
                                this.$message({
                                    type: 'success',
                                    message: "扫描件上传成功"
                                });
                                //获取文件地址
                                get_update_img({id:result.id}).then((res) => {
                                    if (res.data.status == 200) {
                                        this.scan_file.name = item.file.name;
                                        this.scan_file.url = res.data.datas;
                                        this.fileLists = [];
                                    }
                                });
                            }else {
                                if (res.data.status == 401) {
                                    this.$router.push('/login');
                                }
                                this.$message.error(res.data.msg);
                            }
                        });

                    } else {
                        if (res.data.status === 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                        this.fileLists = [];
                    }
                });
            },
            dowCheckReportFile(){
                this.dowFileStatus = true
                let params = {
                    id: this.reportsData.id,
                    type:2
                }
                createNoticeFile(params).then((res) => {
                    if (res.data.status == 200) {
                        this.dowFileStatus = false
                        saveAs(res.data.datas,'')
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                        this.dowFileStatus = false
                    }
                })
            },
            createNotice(){
                this.reviewReportDialogLoading = true;
                // if(this.reportDesc === '') return  this.$message.error('审核意见不能为空。');
                let params = {
                    id: this.reportsData.id,
                    msg: {
                        content: this.reportDesc
                    }
                }
                passNotice(params).then((res)=>{
                    if(res.data.status == 200) {
                        this.dowFile(this.resource_url + res.data.datas)
                        this.reviewReportDialogLoading = false;
                        this.reviewReportDialog = false;
                        this.reportDesc = ''
                        this.$message({
                            type: 'success',
                            message: "审核通过"
                        });
                        this.initData();

                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                    }
                });
            },
            dowFile(fileUrl){
                try {
                    let elemIF = document.createElement('iframe');
                    elemIF.src = fileUrl;
                    elemIF.style.display = 'none';
                    document.body.appendChild(elemIF);
                }catch(e){
                    console.log(e)
                }
            },
            cancel() {
                this.$router.push('/manage/reports/list');
            },
            edit() {
                this.$router.push('/manage/reports/detail/' + this.$route.params.id);
            },
            //打回报告
            returnReport(){
                this.$confirm('确定要打回报告?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    let params = {
                        id: this.reportsData.id,
                        check_report_status: '2'
                    };
                    returnReport(params).then((res) => {
                        if (res.data.status == 200) {
                            this.reportsData.check_report_status = '2';
                            this.reviewReportDialog = false;
                        } else {
                            if (res.data.status == 401) {
                                this.$router.push('/login');
                            }
                            this.$message.error(res.data.msg);
                            this.reviewReportDialog = false;
                        }
                    })

                });
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>

<style scoped>
    .label-title{
        font-size: 14px;
        color:#333;
        font-weight:bold;
    }
    .label-info{
        text-align: left;
        font-size: 14px;
        color:#666;

    }

    .upload-demo{
        display:inline-block;
    }
    .item{
        margin-top:20px;
        padding-left:0;
    }
    p{
        margin-left:10px
    }
    .upload-demo .el-upload-list .el-upload-list{
        display:none
    }
    .clearfix{
        padding:0 0 15px;
        border-bottom: 1px solid #ebeef5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .inspect-item{
        margin-top: 20px;
        border: solid 1px #eceaea;
        padding: 30px;
    }
    .inspect-info{
        margin-top: 30px;
    }
    .inspect-title {
        color: #333;
        font-size:16px;
        line-height:22px;
    }
    .info-item {
        margin-top:10px;
    }
    .info-img{
        line-height: 1;
    }
    .info-img img {
        cursor: pointer;
        height: 75px;
        width: 75px;
        margin-right: 15px;
        display: inline-block;
    }
    .info-title {
        color: #000;
        font-weight: bold;
        line-height:18px;
        margin-bottom:15px;
    }

</style>
